<template>
    <div id="task">

        <ToolBar :names="names"></ToolBar>

        <img :src="bg" alt="" class="bg">

        <div class="content">
            <div class="bg-cover">
                <img :src="cover" alt="">
                <p class="reward">奖励<span>188</span>ABNB+订阅价格<span>100%</span>的ABNB</p>
                <router-link to="/task/pay" tag="p" class="goto"><img :src="go" alt="">去订阅</router-link>
            </div>
            <div class="task-list">
                <div class="task-title">每日任务</div>
                <div class="list-item">
                    <div class="task-icon">
                        <img :src="qd" alt="">
                    </div>
                    <div class="task-desc">
                        <p>
                            <span>每日签到</span>
                            <span>天天领取ABNB</span>
                        </p>
                        <span @click="showlog">签到</span>
                    </div>

                </div>
                <div class="list-item">
                    <div class="task-icon">
                        <img :src="dy" alt="">
                    </div>
                    <div class="task-desc">
                        <p>
                            <span>订阅服务</span>
                            <span>奖励订阅价格100%的ABNB</span>
                        </p>
                        <span @click="tologin('/task/pay')">去订阅</span>
                    </div>

                </div>

                <div class="list-item">
                    <div class="task-icon">
                        <img :src="yq" alt="">
                    </div>
                    <div class="task-desc">
                        <p>
                            <span>邀请好友</span>
                            <span>二级邀请获取更多ABNB</span>
                        </p>
                        <span @click="tologin('/task/share')">去邀请</span>
                    </div>

                </div>

            </div>
        </div>
        <SignIn ref="mychild"></SignIn>
    </div>
</template>

<script>
    import ToolBar from "@/components/Task/ToolBar";
    import bg from "@/assets/img/bg_task_top.png"
    import cover from "@/assets/img/bg_new_task.png"
    import go from "@/assets/img/icon_go.png"
    import qd from "@/assets/img/icon_mrqd.png"
    import dy from "@/assets/img/icon_dyfw.png"
    import yq from "@/assets/img/icon_yqhy.png"
    import SignIn from "./SignIn";
    export default {
        name: "Index",
        components: {SignIn, ToolBar},
        data(){
            return {
                names:"任务",
                bg:bg,
                cover:cover,
                go:go,
                qd:qd,
                dy:dy,
                yq:yq,
            }
        },
        methods:{
            showlog(){
                this.$refs.mychild.centerDialog();
            }

        }
    }
</script>

<style scoped>
    .bg{
        width: 100%;
    }
    .content{
        padding: 0 1rem;
        margin-top: -7rem;
    }
    .bg-cover{
        width: 100%;
        position: relative;
    }
    .bg-cover>img{
        width: 100%;
    }
    .bg-cover .reward{
        position: absolute;
        top: 5rem;
        right: 1rem;
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .bg-cover .reward span{
        color: #fff;
    }
    .bg-cover .goto{
        position: absolute;
        top: 7.5rem;
        right: 2rem;
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        text-decoration:underline;
        color:rgba(255,223,112,1);
    }
    .bg-cover .goto img{
        width: 1.25rem;
        margin-right: 0.2rem;
    }
    .task-list{
        margin-top: 1rem;
        background: #fff;
        border-radius: 0.8rem;
    }
    .task-title{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        padding: 1rem;
        text-align: left;
        border-bottom: 1px solid #EEEEEE;
    }
    .list-item{
        padding:0 1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 4.5rem;
    }
    .task-icon{
        width: 2rem;
        margin-right: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .task-icon img{
        width: 2rem;
    }
    .task-desc{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        border-bottom: 1px solid #e7e7e7;
    }
    .list-item:last-child .task-desc{
        border-bottom: none;
    }
    .task-desc p{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        width: 70%;
        height: 100%;
        padding: 0.2rem 0;

    }
    .task-desc p span{
        display: block;
        width: 100%;
        text-align: left;

    }
    .task-desc p span:first-child{
        font-size:1rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .task-desc p span:last-child{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
    }
    .task-desc>span{
        display: inline-flex;
        width:3.75rem;
        height:1.5rem;
        background:rgba(255,255,255,1);
        border:1px solid rgba(20,163,101,1);
        border-radius:0.1rem;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(20,163,101,1);
        justify-content: center;
        align-items: center;
    }
</style>